<template>
	<scroll-view scroll-y class="home_scroll" @scrolltolower="scrollBottom">
		<view class="home_ul">
			<view class="home_li" v-for="item in listData" :key="item.id">	
				<navigator :url="'/pages/images/images?id='+item.id" class="home_imgBl">							
					<image
						:src="serverUrl + item.images[0]"
						mode="center" class="home_img"></image>
					<image src="/static/images/play.png" mode="aspectFit" v-if="item.video" class="home_play"></image>
				</navigator>
				<view class="home_tBlock">
					<navigator :url="'/pages/images/images?id='+item.id" class="home_ti">
						{{item.title}}</navigator>
					<view class="home_block">
						<view class="home_name">
							<image
								:src="serverUrl + item.img"
								mode="aspectFill" class="home_naIco"></image>
							<text class="home_title">{{item.child2}}</text>
						</view>
						<view class="home_icoBl">
							<image src="/static/images/a1_1.png" mode="aspectFit" class="home_ico">
							</image>
							<text class="home_num">{{item.text3}}</text>
						</view>
					</view>
				</view>
			</view>		
		</view>
	</scroll-view>	
</template>

<script>
	export default {
		name: "dataList",
		props:{
			listData:{
				required:true,
				type:Array,
				default:function(){
					return []
				}
			}
		},
		data() {
			return {				
				serverUrl:this.serverUrl
			};
		},
		methods:{
			scrollBottom:function(){
				this.$emit('loadNextData')
			}
		}
	}
</script>

<style>
	.home_scroll {position: relative;height:100%;width:100%;}
	.home_ul {position: relative;width:98.8%;margin:auto;padding-top:8rpx;padding-bottom:40rpx;}
	.home_li {position: relative;width:48.8%;float: left;margin:8rpx 0.6%;background: #fff;border-radius: 10rpx;overflow: hidden;}
	.home_ul:after {content: "";display: block;clear: both;}	
	.home_imgBl {position: relative;width: 100%;}	
	.home_img {width: 100%;}
	.home_play {position: absolute;top:30rpx;right:30rpx;width:50rpx;z-index: 90;height:50rpx;}
	.home_ti {position: relative;height:80rpx;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;width:100%;margin:auto;color:#000;line-height: 40rpx;}
	.home_block:after {content: "";display: block;clear: both;}
	.home_block {position: relative;width:100%;margin-top:15rpx;}
	.home_naIco {width:50rpx;height:50rpx;position:absolute;border-radius: 200rpx;left:0;top:-5rpx;}
	.home_ico {width:35rpx;height:35rpx;}
	.home_tBlock {position: relative;padding:20rpx 5%;padding-top:5rpx;}
	.home_name {position: relative;padding-left:60rpx;}
	.home_icoBl {position: absolute;right:0;top:0;padding-left:40rpx;}
	.home_ico {position: absolute;top:6rpx;left:0;}	
	.home_title {position: relative;width:140rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;font-size:13px}
	.home_num {position: relative;max-width:92rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;display: block;font-size:13px}
</style>
